<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:a4j="http://richfaces.org/a4j">
    <h:head>
        <title>Roster</title>
        <link href="css/global.css" rel="stylesheet" type="text/css" />
        <link href="css/rosterComponent.css" rel="stylesheet" type="text/css" />

        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" src="js/drag-drop-custom.js"></script>
        <script src="js/global.js"></script>

        <script type="text/javascript">
            //<![CDATA[
            $(document).ready(function(){
                
                $.each($('.hasPosition'), function() {
    
                    var to = this.innerText;
                    var s = this.parentNode.parentNode.id;
                    var sl = s.length;
                   
                    if(sl<5 && to != null)
                    {
                        
                        var c = this.parentNode.getElementsByTagName("div")[1].innerText;
                        
            
                        
                        if(to == '_QB1'){dropItems(s,to,0,0);  document.getElementById("myQB1").innerHTML="";
                            document.getElementById("myQB1").innerHTML=c;}
                        else if(to=='_Wo1'){dropItems(s,to,0,0); document.getElementById("myWo1").innerHTML="";
                            document.getElementById("myWo1").innerHTML=c; }
                        else if(to=='_RB1'){dropItems(s,to,0,0);  document.getElementById("myRB1").innerHTML="";
                            document.getElementById("myRB1").innerHTML=c;}
                        else if(to=='_RB2'){dropItems(s,to,0,0); document.getElementById("myRB2").innerHTML="";
                            document.getElementById("myRB2").innerHTML=c;}
                        else if(to=='_WR1'){dropItems(s,to,0,0);  document.getElementById("myWR1").innerHTML="";
                            document.getElementById("myWR1").innerHTML=c;}
                        else if(to=='_WR2'){dropItems(s,to,0,0); document.getElementById("myWR2").innerHTML="";
                            document.getElementById("myWR2").innerHTML=c;}
                        else if(to=='_TE1'){dropItems(s,to,0,0);  document.getElementById("myTE1").innerHTML="";
                            document.getElementById("myTE1").innerHTML=c;}
                        else if(to=='_KK1'){dropItems(s,to,0,0); document.getElementById("myKK1").innerHTML="";
                            document.getElementById("myKK1").innerHTML=c;}
                        else if(to=='_DEF'){dropItems(s,to,0,0);  document.getElementById("myDEF").innerHTML="";
                            document.getElementById("myDEF").innerHTML=c;}
                    }
                    
                });
                
                
                
                
                
            });
            
            function getQB1(){var qb1 = document.getElementById("myQB1").innerHTML; return qb1; }
            function getWO1(){var wo1 = document.getElementById("myWo1").innerHTML; return wo1;}
            function getRB1(){var rb1 = document.getElementById("myRB1").innerHTML; return rb1;}
            function getRB2(){var rb2 = document.getElementById("myRB2").innerHTML; return rb2;}
            function getWR1(){var wr1 = document.getElementById("myWR1").innerHTML; return wr1;}
            function getWR2(){var wr2 = document.getElementById("myWR2").innerHTML; return wr2;}
            function getTE1(){var te1 = document.getElementById("myTE1").innerHTML; return te1;}
            function getKK1(){var kk1 = document.getElementById("myKK1").innerHTML; return kk1;}
            function getDEF(){var def = document.getElementById("myDEF").innerHTML; return def;}
            
            //]]> 
        </script>
        <style>
            .name
            {
                font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
                font-size:0.7em;
                margin:0;
                float : left;
            }
            .team
            {
                font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
                font-size:0.7em;
                margin:0;
                float : left;
            }
            .opp
            {
                font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
                font-size:0.5em;
                margin:0;
                float : left;
            }
            .status
            {
                font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
                font-size:0.5em;
                margin:0;
                float : left;
            }
            .fantasyPoints
            {
                font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
                font-size:0.7em;
                margin:0;
                float : left;
            }
        </style>
    </h:head>
    <h:body>
        <div id="background">
            <div hidden="true" id="myQB1"></div>
            <div hidden="true" id="myWo1"></div>
            <div hidden="true" id="myRB1"></div>
            <div hidden="true" id="myRB2"></div>
            <div hidden="true" id="myWR1"></div>
            <div hidden="true" id="myWR2"></div>
            <div hidden="true" id="myTE1"></div>
            <div hidden="true" id="myKK1"></div>
            <div hidden="true" id="myDEF"></div>
            <div class="navy">
            </div>
            <div id="content">

                <div id="mainContainer">
                    <h:form>
                        <span class="whiteHeader">Roster</span><br/><br/>
                        <div id="capitals">
                            <p><b>Players</b></p>
                            <div id="dropContent">

                                <c:forEach items="#{rosterBean.data}" var="r">
                                    <div class="#{r.get(4) == 'BN' ? 'dragableBox' : 'dragableBox'}" id="#{r.get(0)}">
                                        <div class="textContainer" >
                                            <div class="#{r.get(4) == 'NotBN' ? 'hasPosition' : ''}" hidden="true">#{r.get(5)}</div>
                                            <div hidden="true">#{r.get(3)}</div>
                                            <div class="name">#{r.get(1)} #{r.get(2)}</div>
                                            <div class="team">(-)</div>
                                            <div class="opp">OPP : GB - </div>
                                            <div class="status">Win(24-20)</div>
                                            <div class="fantasyPoints">Fantasy Points : 9.84</div>
                                        </div>  
                                        <div hidden="true"></div>
                                    </div>
                                </c:forEach>		
                            </div>
                        </div>

                        <div id="countries">
                            <div id="_QB1" class="dragableBoxRight">QB</div>
                            <div id="_Wo1" class="dragableBoxRight">W/R</div>
                            <div id="_RB1" class="dragableBoxRight">RB1</div>
                            <div id="_RB2" class="dragableBoxRight">RB2</div>			
                            <div id="_WR1" class="dragableBoxRight">WR1</div>
                            <div id="_WR2" class="dragableBoxRight">WR2</div>
                            <div id="_TE1" class="dragableBoxRight">TE</div>
                            <div id="_KK1" class="dragableBoxRight">K</div>
                            <div id="_DEF" class="dragableBoxRight">Def</div>
                        </div>
                        <div class="clear"></div>

                        <a4j:commandButton action="#{rosterBean.action}" value="Submit!">
                            <a4j:param name="arg0" noEscape="true" value="getQB1()" assignTo="#{rosterBean.qb1}" />
                            <a4j:param name="arg1" noEscape="true" value="getWO1()" assignTo="#{rosterBean.wo1}" />
                            <a4j:param name="arg2" noEscape="true" value="getRB1()" assignTo="#{rosterBean.rb1}" />
                            <a4j:param name="arg3" noEscape="true" value="getRB2()" assignTo="#{rosterBean.rb2}" />
                            <a4j:param name="arg4" noEscape="true" value="getWR1()" assignTo="#{rosterBean.wr1}" />
                            <a4j:param name="arg5" noEscape="true" value="getWR2()" assignTo="#{rosterBean.wr2}" />
                            <a4j:param name="arg6" noEscape="true" value="getTE1()" assignTo="#{rosterBean.te1}" />
                            <a4j:param name="arg7" noEscape="true" value="getKK1()" assignTo="#{rosterBean.kk1}" />
                            <a4j:param name="arg8" noEscape="true" value="getDEF()" assignTo="#{rosterBean.def}" />
                        </a4j:commandButton>

                    </h:form>
                </div>
                <div id="debug"></div>
                <script type="text/javascript" src="js/drag-drop-init.js"></script>
            </div>
        </div>
    </h:body>
</html>
